<template>
    <div class="analysis-container">
        <allHead>
            <template v-slot:left>学情分析</template>
            <template v-slot:right>
                <van-dropdown-menu class="vandropdown" active-color="#1989fa">
                    <van-dropdown-item v-model="currentClass" :options="classOptions" />
                </van-dropdown-menu>
            </template>
        </allHead>

        <div class="content">

            <div class="stats-cards">
                <van-card class="stats-card">
                    <template #title>
                        <div class="card-title">平均分</div>
                        <div class="card-value">86.5</div>
                    </template>
                </van-card>

                <van-card class="stats-card">
                    <template #title>
                        <div class="card-title">作业完成率</div>
                        <div class="card-value">92%</div>
                    </template>
                </van-card>
            </div>


            <div class="chart-section">
                <h3>知识掌握分析</h3>
                <div class="knowledge-charts">
                    <div v-for="(item, index) in knowledgeData" :key="index" class="chart-item" ref="chartDom"></div>
                </div>
            </div>

            <div class="chart-section">
                <h3>学习趋势分析</h3>
                <div class="trend-chart" ref="trendChart"></div>
            </div>


            <div class="suggestions">
                <h3>学习建议</h3>
                <van-card v-for="(item, index) in suggestions" :key="index" class="suggestion-card">
                    <template #title>
                        <div class="suggestion-title">{{ item.title }}</div>
                    </template>
                    <template #desc>
                        <div class="suggestion-desc">{{ item.content }}</div>
                        <div class="suggestion-time">{{ item.time }}</div>
                    </template>
                </van-card>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
import allHead from '@/components/allHead.vue'

// 班级选择数据
const currentClass = ref('class3')
const classOptions = [
    { text: '高三一班', value: 'class1' },
    { text: '高三二班', value: 'class2' },
    { text: '高三三班', value: 'class3' }
]

// 知识掌握数据
const knowledgeData = ref([
    { name: '函数概念', value: 70 },
    { name: '二次函数', value: 82 },
    { name: '数列', value: 68 },
    { name: '概率统计', value: 90 }
])

// 学习建议数据
const suggestions = ref([
    {
        title: '二次函数专项训练',
        content: '针对性提升二次函数应用题解题能力，加强题型分析',
        time: '建议学习时长：48分钟'
    },
    {
        title: '概率统计基础夯实',
        content: '通过实例讲解概率统计基础知识，强化应用能力',
        time: '建议学习时长：30分钟'
    }
])

// ECharts图表实例
let knowledgeCharts = []
let trendChartInstance = null

// 初始化知识掌握图表
const initKnowledgeCharts = () => {
    knowledgeData.value.forEach((item, index) => {
        const chartDom = document.querySelectorAll('.chart-item')[index]
        const chart = echarts.init(chartDom)

        const option = {
            series: [{
                type: 'pie',
                radius: ['60%', '80%'],
                color: ['#5470c6', '#91cc75'],
                label: {
                    show: true,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 12,
                        fontWeight: 'bold'
                    }
                },
                data: [
                    { value: item.value, name: item.name +'\n'+item.value +'%'},
                    { value: 100 - item.value }
                ]
            }]
        }

        chart.setOption(option)
        knowledgeCharts.push(chart)
    })
}

// 初始化趋势图表
const initTrendChart = () => {
    const trendData = [86, 82, 88, 85, 90, 86.5]
    const chartDom = document.querySelector('.trend-chart')
    trendChartInstance = echarts.init(chartDom)

    const option = {
        xAxis: {
            type: 'category',
            data: ['第一次', '第二次', '第三次', '第四次', '第五次', '第六次']
        },
        yAxis: {
            type: 'value',
            max: 100
        },
        series: [{
            data: trendData,
            type: 'line',
            smooth: true,
            lineStyle: {
                color: '#5470c6',
                width: 2
            },
            itemStyle: {
                color: '#5470c6'
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#5470c6' },
                    { offset: 1, color: '#5470c610' }
                ])
            }
        }]
    }

    trendChartInstance.setOption(option)
}

// 窗口resize处理
const handleResize = () => {
    knowledgeCharts.forEach(chart => chart.resize())
    trendChartInstance?.resize()
}

onMounted(() => {
    initKnowledgeCharts()
    initTrendChart()
    window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
    knowledgeCharts.forEach(chart => chart.dispose())
    trendChartInstance?.dispose()
    window.removeEventListener('resize', handleResize)
})
</script>

<style lang="less" scoped>
.analysis-container {
    background: #f5f7fa;
    min-height: 100vh;

    .content {
        padding: 16px;
        margin-bottom: 50px;

        .stats-cards {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;

            .stats-card {
                flex: 1;
                background: white;
                border-radius: 8px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

                .card-title {
                    font-size: 14px;
                    color: #666;
                    margin-bottom: 15px;
                }

                .card-value {
                    font-size: 24px;
                    color: #333;
                    font-weight: bold;
                }
            }
        }

        .chart-section {
            background: white;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

            h3 {
                margin: 0 0 16px 0;
                font-size: 16px;
                color: #333;
            }

            .knowledge-charts {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 16px;

                .chart-item {
                    height: 100px;
                }
            }

            .trend-chart {
                height: 300px;
            }
        }

        .suggestions {
            background: white;
            padding: 16px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            .suggestion-card {
                
                margin-top: 12px;
                border-radius: 8px;

                .suggestion-title {
                    font-size: 15px;
                    color: #333;
                    font-weight: bold;
                    margin: 8px  0;
                }

                .suggestion-desc {
                    font-size: 13px;
                    color: #666;
                    line-height: 1.5;
                    margin-bottom: 4px;
                }

                .suggestion-time {
                    font-size: 12px;
                    color: #999;
                }
            }
        }
    }
}

.van-card:not(:first-child) {
    margin-top: 0px
}

.vandropdown {
    --van-dropdown-menu-height: 30px;
    // --van-dropdown-menu-shadow: none !important;
}
</style>